<script setup lang="ts">
import ReferIcon from '~/assets/icons/games/referral-2.svg';
import { useLayout } from '../useLayout';
import CasinoIcon from './icon/casino.svg';
import MenuIcon from './icon/menu.svg';
import OriginalIcon from './icon/original.svg';
import SportsIcon from './icon/sports.svg';
import WalletIcon from './icon/wallet.svg';
import NavItem from './NavItem.vue';
// import AccountIcon from './icon/account.svg';

const route = useRoute();
const isAuthed = useAuthed();
const { asideMenu, asideContent } = useLayout(); 0;

const menuActive = computed(() => asideMenu.opened);
const walletActive = computed(() => !!globalPopups.wallet.modalProps.open);
const originalActive = computed(() => route.name === RN.GAMELIST && route.params.typeCode === 'originals' && !menuActive.value && !walletActive.value);
const homeActive = computed(() => route.name === RN.INDEX && !menuActive.value && !walletActive.value);
// const accountActive = computed(() => route.name === RN.USER_ACCOUNT && !menuActive.value && !walletActive.value);
// const referActive = computed(() => route.name === RN.REFERRAL_DASHBOARD && !menuActive.value && !walletActive.value);
const sportsActive = computed(() => route.name === RN.REFERRAL_DASHBOARD && !menuActive.value && !walletActive.value);
</script>

<template>
  <ul
    class="m-0 w-full flex list-none b-t-(1 sys-layer-e solid) rounded-t-3 bg-sys-layer-a p-0 *:pb-3 *:pt-2"
    @click.capture="asideContent.toggle(false)"
  >
    <NavItem
      :name="$t('20L3a7jK3vXUfr7JCbxql')" :icon="MenuIcon" :active="menuActive"
      @click="asideMenu.toggle()"
    />
    <NavItem
      :name="$t('qPuoA8CxIq1ttDZpej3d')" :icon="OriginalIcon" :active="originalActive"
      @click="[asideMenu.toggle(false), $router.push(buildGameListRoute({ alias: 'originals' }))]"
    />
    <NavItem
      :name="$t('b2S1l765Kk8sasw6fSmiz')" :icon="CasinoIcon" :active="homeActive"
      @click="[asideMenu.toggle(false), $router.push({ name: RN.INDEX })]"
    />
    <NavItem
      :name="$t('uTf34VTqpqVSm_7jqwygQ')" :icon="SportsIcon" :active="sportsActive"
      @click="[asideMenu.toggle(false), $router.push({ name: RN.SPORTS, params: { gameCode: 'soccer' } })]"
    />
    <NavItem
      :name="$t('qJaOFvSHkapUsSa7qb0s')" :icon="WalletIcon" :active="walletActive"
      @click="[asideMenu.toggle(false), isAuthed ? globalPopups.wallet.open() : globalPopups.sign.open()]"
    />
    <!-- <NavItem
      :name="$t('frj2WLcmMCxYiFi40qoJu')" :icon="ReferIcon" :active="referActive"
      @click="[asideMenu.toggle(false), $router.push({ name: RN.REFERRAL_DASHBOARD })]"
    /> -->
    <!-- <NavItem
      :name="$t('h5l_2nYi7MkLYzhInvDnv')" :icon="AccountIcon" :active="accountActive"
      @click="[asideMenu.toggle(false), $router.push({ name: RN.USER_ACCOUNT })]"
    /> -->
  </ul>
</template>
